<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            前端百宝箱
        </title>
        <style type="text/css">
            body { padding-top: 60px; padding-bottom: 20px; }
        </style>
        <link href="css/bootstrap.css" rel="stylesheet">
		<link href="js/google-code-prettify/prettify.css" rel="stylesheet">
		<link href="css/main.css" rel="stylesheet">
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
            </script>
        <![endif]-->
		<script src="js/jquery-1.7.1.min.js"></script>
		<script>
			function makeTable(table,data){
				var buf=[];
				for(var i=0;i<data.length;i++){
					var item=data[i];
					buf.push('<tr>');
					buf.push('<td>'+item.name+'</td>');
					buf.push('<td>'+item.value+'</td>');
					buf.push('</tr>');
				}
				table.find("tbody").append(buf.join(''));
			}
		</script>
    </head>
    
    <body onload="prettyPrint()">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">前端百宝箱</a>
          <div class="btn-group pull-right">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
              <i class="icon-user"></i> 下拉导航
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="index.html">首页</a></li>
              <li class="divider"></li>
              <li><a href="html.html">HTML</a></li>
              <li class="divider"></li>
              <li><a href="css.html">CSS</a></li>
              <li class="divider"></li>
              <li><a href="javascript.html">JavaScript</a></li>
			   <li class="divider"></li>
			  <li><a href="tools.html">工具</a>
			   <li class="divider"></li>
			  <li><a href="resources.html">资源</a></li>
            </ul>
          </div>
          <div class="nav-collapse">
            <ul class="nav">
              <li><a href="index.html">首页</a></li>
              <li><a href="html.html">HTML</a></li>
              <li><a href="css.html">CSS</a></li>
              <li class="active"><a href="javascript.html">JavaScript</a></li>
			  <li><a href="tools.html">工具</a>
			  <li><a href="resources.html">资源</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
            </ul>
          </div>
			<!--<div class="well sidebar-nav">
				<ul class="nav nav-pills nav-stacked">
					<li class="active"><a href="#">首页</a></li>
					<li><a href="#">介绍</a></li>
					<li><a href="#">消息</a></li>
				</ul>
			</div>-->
        </div>
        <div class="span9">
			<!--section begin-->
			<section id="practice">
				<div class="well">
				<h2>JavaScript 编写技巧</h2>
				<p>积累优秀的 JavaScript 编写方法。</p>
				</div>
				<div class="row-fluid">
				  <h4 id="go-top">回到页面顶部</h4>
				  <p>jQuery实现回到页面顶部</p>
<pre class="prettyprint lang-js linenums">
$(window).scroll(function() {
	if ($(this).scrollTop() > 500) {
		$('#go-top').fadeIn();
	} else {
		$('#go-top').fadeOut();
	}
});
$('#go-top a').click(function() {
	$('body,html').animate({
		scrollTop : 0
	}, 500);
	return false;
});
</pre>
				</div>
				<div class="row-fluid">
				  <h4 id="jq-prop">jQuery prop 方法的使用</h4>
				  <p>jQuery 1.6版本开始支持prop方法，可以在async,autofocus,checked,multiple,readonly,selected,disabled属性使用</p>
<pre class="prettyprint lang-js linenums">
$("#demo").prop("checked");
$("#demo").prop("disabled",true);
</pre>
				</div>
				<div class="row-fluid">
				  <h4 id="bs-nav">Bootstrap 导航切换</h4>
				  <p>Bootstrap 导航动态切换的实现方法。</p>
<pre class="prettyprint lang-js linenums">
$(".nav-list > li").click(function(){
	if($(this).hasClass("help"))
		return;
	$(this).parent()
		.find(".active")
		.removeClass("active")
		.find("i").removeClass("icon-white");;
	$(this).addClass("active");
	$(this).find("i").addClass("icon-white");
	
	var tar=$($(this).find("a")[0].hash);
	$('body,html').animate({
		scrollTop: tar.offset().top-60
	}, "fast");
	return false;
});
</pre>
				</div>
				<div class="row-fluid">
				  <h4 id="type-check">判断变量类型</h4>
				  <p>jQuery 中判断变量类型的方法。</p>
					<pre class="prettyprint lang-js linenums">
//type list: “Boolean Number String Function Array Date RegExp Object”
toString.call([1,2,3])=="[object Array]"; //true
toString.call({name:'John'})=="[object Object]"; //true

//对于数组有更简便的方法
function isArray(value){
	return typeof value.sort=="function";
}
</pre>
				</div>
				<div class="row-fluid">
				  <h4 id="equal">JavaScript 中相等运算符</h4>
				  <p>JavaScript 中相等运算符特殊用法。</p>
					<table class="table table-striped table-bordered">
						<thead>
							<tr>
								<th>表达式</th>
								<th>结果</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>null == undefined</td>
								<td>true</td>
							</tr>
							<tr>
								<td>undefined == 0</td>
								<td>false</td>
							</tr>
							<tr>
								<td>null == 0</td>
								<td>false</td>
							</tr>
							<tr>
								<td>NaN == NaN</td>
								<td>false</td>
							</tr>
							<tr>
								<td>false == 0</td>
								<td>true</td>
							</tr>
							<tr>
								<td>true == 1</td>
								<td>true</td>
							</tr>
							<tr>
								<td>true == 2</td>
								<td>false</td>
							</tr>
							<tr>
								<td>"5" == 5</td>
								<td>true</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="row-fluid">
				  <h4 id="js-quiz">JavaScript Quiz（小测验）</h4>
				  <p>JavaScript 中相等运算符特殊用法。</p>
					<table class="table table-striped table-bordered" id="quiz-list-table">
						<thead>
							<tr>
								<th>序号</th>
								<th>网址</th>
							</tr>
						</thead>
						<tbody>
						  <script>
							(function(){
								var data=[
									{name:'1',value:'http://perfectionkills.com/javascript-quiz/'},
									{name:'2',value:'http://james.padolsey.com/javascript/another-javascript-quiz/'},
									{name:'3',value:'http://www.nczonline.net/blog/2010/02/16/my-javascript-quiz/'},
									{name:'4',value:'http://javascript.about.com/library/bltut36q.htm'},
									{name:'5',value:'http://dmitry.baranovskiy.com/post/91403200'}
								];
								makeTable($("#quiz-list-table"),data);
							})();
						  </script>
						</tbody>
					</table>
					<table class="table table-striped table-bordered" id="quiz-table">
						<thead>
							<tr>
								<th>表达式</th>
								<th>结果</th>
							</tr>
						</thead>
						<tbody>
						  <script>
							(function(){
								var data=[
									{name:'(1,2,3)',value:'3'},
									{name:'1 && "foo" || 0',value:'\"foo\"'},
									{name:'[true, false][+true, +false]',value:'true'},
									{name:"++'52'.split('')[0]",value:'6'},
									{name:'delete [].length;',value:'false'}
								];
								makeTable($("#quiz-table"),data);
							})();
						  </script>
						</tbody>
					</table>
				</div>
				<div class="row-fluid">
				  <h4 id="js-inherit">JavaScript 继承实现方式</h4>
				  <p>JavaScript 继承实现的常用方式。</p>
					<pre class="prettyprint lang-js linenums">
function ClassA(name){
	this.name=name;
}
ClassA.prototype.sayName=function(){
	alert(this.name);
}

function ClassB(name,age){
	ClassA.call(this,name);
	this.age=age;
}
ClassB.prototype=new ClassA();
ClassB.prototype.sayAge=function(){
	alert(this.age);
}
</pre>
				</div>
				<div class="row-fluid">
				  <h4 id="js-callee">JavaScript callee 用法示例</h4>
				  <p>返回正被执行的 Function 对象，即指定的 Function 对象的正文。</p>
					<pre class="prettyprint lang-js linenums">
function factorial(num) {
	if (num <= 1) {
		return 1;
	} else {
		return num * arguments.callee(num - 1);
	}
}

console.log(factorial(10)); //3628800
</pre>
				</div>
				<div class="row-fluid">
				  <h4 id="jq-event">jQuery 事件绑定方法</h4>
				  <p>jQuery 中各种事件绑定方法的区别。</p>
					<pre class="prettyprint lang-js linenums">
//为所有匹配的元素绑定事件。
$('a').bind('click', function() {
	//TODO	
});

//为所有匹配的元素绑定事件，即使这个元素是以后再添加进来的也有效。
$('a').live('click', function() {
	//TODO
});
//live方法还可以被绑定到具体的元素而不是document上。
$('a', $('#container')[0]).live('click', function() {
	//TODO
});

//为指定的元素（属于被选元素的子元素）绑定事件。
$('#container').delegate('a', 'click', function() {
	//TODO
});
</pre>
				</div>

				<div class="row-fluid">
				  <h4 id="firefox-close">Firefox 关闭页面的方法</h4>
				  <p>Firefox 关闭非脚本打开的页面的方法</p>
					<pre class="prettyprint lang-js linenums">
window.open('', '_self', '');
window.close();
</pre>
				</div>
				<div class="row-fluid">
				  <h4 id="closure">JavaScript 闭包经典示例</h4>
				  <p>演示 JavaScript Closure 用法</p>
					<pre class="prettyprint lang-js linenums">
var ary=[1,2,3,4,5];
var funcArray=[];
for(var i=0;i&lt;arr.length;i++){
	(function(){
		var item=arr[i];
		funcArray.push(function(){alert(item);});
	})();
}
funcArray[0]();
</pre>
				</div>
			</section>
			<!--section end-->
        </div>
        </div>
		<hr>
		<footer>
			<p>
				Hongbo Li &copy; 2012 Powered by
				<a href="docs/bootstrap/index.html" target="_blank">
					Bootstrap
				</a>
			</p>
		</footer>
      </div><!--/row-->
        <script src="js/jquery-1.7.1.min.js"></script>
		<script src="js/google-code-prettify/prettify.js"></script>
        <script src="js/bootstrap.js"></script>
		<script src="js/main.js"></script>
    </body>
</html>
